<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useTableCURD } from '#/hooks/useTableList'
import { Page } from '@vben/common-ui'
import { Image, Modal, message, Spin, Input } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import TableAction from '#/components/TableAction/index.vue'
import { gzcolumns, gzformSchema } from '../data/table'
import type { TableListItem } from '../use/api'
import { PageApi } from '../use/api'
import WxChat from '../components/wx.vue'
// 添加 props 定义
const props = defineProps<{
    id?: number | string,
    dqUserName: string
}>()
// 当接收的id变化时可以执行相应操作
onMounted(() => {
    if (props.id) {
        console.log('收到参数:', props.id)
        reload()
    }
})

const formObj = ref({
    uid: props.id
})
const formOptions: VbenFormProps = {
    schema: gzformSchema
}

const gridOptions: VxeGridProps<any> = {
    columns: gzcolumns,
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                const res = await PageApi.getGzPageList({
                    ...formObj.value,
                    ...formValues,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    },
    cellConfig: {
        height: 120
    }
}

/**
 * 表格配置
 */
const { Grid, reload } = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {}
})
/**
 * table 操作
 * @param record
 */
function getActions(record: TableListItem) {
    const arr: any[] = []
    if (record.isAttention == 0) {
        arr.push({
            label: '回关',
            onClick: () => {
                Modal.confirm({
                    title: '确认回关吗？',
                    okText: '确认',
                    okType: 'danger',
                    onOk: async () => {
                        await PageApi.revokeGz({
                            idList: [record.id]
                        })
                        message.success('回关成功')
                        reload()
                    }
                })
            }
        })
    } else {
        arr.push({
            label: '私信',
            onClick:async () => {
                let item = record
                itemObj.value = JSON.parse(JSON.stringify(item))
                // 私信时，需要将当前用户的用户名赋值给formUsername
                itemObj.value.formUserId = record.userId
                itemObj.value.formUsername = record.username
                itemObj.value.username = props.dqUserName
                openZj.value = true
            }
        })
    }

    return arr
}
const itemObj: any = ref({})
const openZj = ref(false)
</script>

<template>
    <Page>
        <Grid>
            <template #url="{ row }">
                <Image :width="200" :src="row.url" />
            </template>
            <template #isUsed="{ row }">
                {{ row.isUsed ? '是' : '否' }}
            </template>
            <template #isAttention="{ row }">
                {{ row.isAttention == 1 ? '已关注' : '未关注' }}
            </template>
            <template #action="{ row }">
                <TableAction :actions="getActions(row)" />
            </template>
        </Grid>
        <Modal :title="`${itemObj.username}和${itemObj.formUsername}的聊天窗口`" v-model:open="openZj" width="900px">
            <WxChat :avatar-url="itemObj.avatarUrl" :chat-info="itemObj" :key="itemObj.id" :open="openZj"/>
        </Modal>
    </Page>
</template>
